<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻网站 - 布局练习解决方案</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="navbar-container">
            <div class="logo">
                <h1>新闻网站</h1>
            </div>
            <nav class="nav-menu">
                <button class="menu-toggle" aria-label="切换菜单">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <ul class="nav-links">
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">国内</a></li>
                    <li><a href="#">国际</a></li>
                    <li><a href="#">科技</a></li>
                    <li><a href="#">体育</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="main-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <nav class="category-nav">
                <h2>新闻分类</h2>
                <ul class="category-list">
                    <li><a href="#" class="active">热门推荐</a></li>
                    <li><a href="#">时政要闻</a></li>
                    <li><a href="#">财经资讯</a></li>
                    <li><a href="#">科技动态</a></li>
                    <li><a href="#">体育赛事</a></li>
                    <li><a href="#">文化教育</a></li>
                    <li><a href="#">生活健康</a></li>
                    <li><a href="#">娱乐新闻</a></li>
                </ul>
            </nav>
        </aside>

        <!-- 新闻内容区 -->
        <section class="news-grid">
            <article class="news-card">
                <img src="https://picsum.photos/400/300?random=1" alt="新闻图片">
                <div class="news-content">
                    <h3>科技创新引领未来发展</h3>
                    <p>人工智能和可再生能源技术的突破性进展正在改变我们的生活方式...</p>
                </div>
            </article>
            <article class="news-card">
                <img src="https://picsum.photos/400/300?random=2" alt="新闻图片">
                <div class="news-content">
                    <h3>全球经济复苏展现新希望</h3>
                    <p>多个国家经济指标向好，国际贸易活动逐步恢复正常水平...</p>
                </div>
            </article>
            <article class="news-card">
                <img src="https://picsum.photos/400/300?random=3" alt="新闻图片">
                <div class="news-content">
                    <h3>体育赛事精彩纷呈</h3>
                    <p>多项国际重大体育赛事相继举行，体育健儿们展现出最佳竞技状态...</p>
                </div>
            </article>
            <article class="news-card">
                <img src="https://picsum.photos/400/300?random=4" alt="新闻图片">
                <div class="news-content">
                    <h3>教育改革持续推进</h3>
                    <p>新的教育政策出台，推动教育公平发展，提升教育质量...</p>
                </div>
            </article>
            <article class="news-card">
                <img src="https://picsum.photos/400/300?random=5" alt="新闻图片">
                <div class="news-content">
                    <h3>环保行动刻不容缓</h3>
                    <p>全球气候变化引发关注，各国积极采取措施应对环境挑战...</p>
                </div>
            </article>
            <article class="news-card">
                <img src="https://picsum.photos/400/300?random=6" alt="新闻图片">
                <div class="news-content">
                    <h3>文化交流促进理解</h3>
                    <p>国际文化节开幕，展示各国独特文化魅力，增进民心相通...</p>
                </div>
            </article>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-section">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">联系方式</a></li>
                    <li><a href="#">招聘信息</a></li>
                    <li><a href="#">版权声明</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>新闻中心</h4>
                <ul>
                    <li><a href="#">新闻专题</a></li>
                    <li><a href="#">图片新闻</a></li>
                    <li><a href="#">视频新闻</a></li>
                    <li><a href="#">专题报道</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>服务支持</h4>
                <ul>
                    <li><a href="#">意见反馈</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">投诉建议</a></li>
                    <li><a href="#">网站地图</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <ul>
                    <li><a href="#">微信公众号</a></li>
                    <li><a href="#">新浪微博</a></li>
                    <li><a href="#">抖音号</a></li>
                    <li><a href="#">RSS订阅</a></li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2024 新闻网站 版权所有</p>
        </div>
    </footer>

    <script>
        // 汉堡菜单切换
        document.querySelector('.menu-toggle').addEventListener('click', function() {
            document.querySelector('.nav-links').classList.toggle('active');
            this.classList.toggle('active');
        });
    </script>
</body>
</html>
